<template>
	<view style="border: 1px solid #fff;">
		<view class="card" v-for="(item,i) in list" :key="i" @click="skip(item.id)">
			<view>
				<view class="font-32">{{item.s_time_text}}</view>
				<view class="flex flex-ai-c mt-30">
					<view class="mr-20 tag">线下沙龙活动</view>
					<view class="tag mr-20" style="color: #FF0000;" v-if="item.active_status == 0">
						{{filterState(item.order_status)}}
					</view>
					<view class="tag" style="color: #FF0000;" v-else>{{filterActiveStatus(item.active_status)}}</view>
				</view>
			</view>
			<u-line margin="60rpx 0" color="#E7E5E0" :hairLine="false" />
			<view style="color: #666666;" class="font-24">
				<view class="font-28" style="color: #333333;">{{item.activity_title}}</view>

				<view class="flex mt-30">
					<view class="mr-30">
						<i-icon icon="icon-location" size="24rpx" />
					</view>
					<view class="f1">
						<view style="width: 300rpx;">
							{{item.address}}
						</view>
					</view>
					<view @click.stop="chooseAddr(item)">
						<i-icon icon="icon-navigation" size="23rpx" />
						{{item.distance_text}}
					</view>
				</view>
				<view class="flex flex-ai-c" style="margin: 30rpx 0;">
					<view class="mr-30"><i-icon icon="icon-tel" size="24rpx" /></view>
					<view>{{item.tel}}</view>
				</view>
				<view class="flex flex-ai-c">
					<view class="mr-30"><i-icon icon="icon-time" size="24rpx" /></view>
					<view>{{item.s_e_time_text}}</view>
				</view>
			</view>
			<view v-if="item.order_status == 0">
				<u-line margin="60rpx 0" color="#E7E5E0" :hairLine="false" />
				<view class="flex flex-ai-c flex-jc-sb">
					<u-count-down :timestamp="item.timestamp" format="mm分ss秒自动关闭"></u-count-down>
					<view class="btn" @click.stop="goPay(item.order_id)">去支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed
	} from 'vue'
	import me from '../../../../api/me.js';
	interface Props {
		list ?: any
		swiperCurrent : number
	}
	const props = withDefaults(defineProps<Props>(), {
		list: [],
		swiperCurrent: 0
	})
	const emit = defineEmits(['reset'])
	const skip = (id : string | number) => {
		uni.navigateTo({
			url: `/pages/common/salon/detail?id=${id}`
		})
	}
	const chooseAddr = (item : any) => {
		if(!item.address) item.address = ''
		let arr = item.address.split(' ')
		let address = arr.slice(-1)[0]
		arr.pop()
		uni.openLocation({
			longitude: Number(item.lng),
			latitude: Number(item.lat),
			name: arr.join(''),
			address: address,
			success: (res) => {
				console.log('打开成功');
			},
			fail: (err) => {
				console.log(err);
			}
		})
		
	}
	const filterState = computed(() => {
		return (state) => {
			let text = ''
			switch (state) {
				case 0:
					text = '待支付'
					break
				case 1:
					text = '已支付'
					break
				case 2:
					text = '已退款'
					break
				case 3:
					text = '已取消'
					break
			}
			return text
		}
	})
	const filterActiveStatus = computed(() => {
		return (state : number) => {
			let text = ''
			switch (state) {
				case 0:
					text = '报名中'
					break
				case 1:
					text = '进行中'
					break
				case 2:
					text = '已结束'
					break
			}
			return text
		}
	})
	const goPay = async (order_id : any) => {
		const res = await me.activePay({
			order_id: order_id
		})
		let payInfo : any = res.data.payRes
		uni.requestOrderPayment({
			...payInfo,
			success() {
				showMsg('支付成功')
				emit('reset')
			},
			fail(err2) {
				if (err2.errMsg === 'requestPayment:fail cancel') {
					showMsg('您已取消支付')
				} else {
					showMsg('支付失败')
				}
			}
		})
	}
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
</script>

<style scoped lang="scss">
	.card {
		background: #F8F8F8;
		padding: 60rpx 42rpx;
		margin: 20rpx;

		.tag {
			width: 146rpx;
			height: 44rpx;
			border-radius: 4rpx;
			border: 1rpx solid #919191;
			font-size: 20rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn {
			width: 150rpx;
			height: 58rpx;
			border-radius: 30rpx;
			border: 1rpx solid #FF0000;
			color: #FF0000;
			text-align: center;
			line-height: 58rpx;
		}
	}
</style>